<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>表单1</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.css">
		<link rel="stylesheet" href="../css/mui.poppicker.css">
		<link rel="stylesheet" href="../css/form.css">
		<script src="../fonts/iconfont.js"></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar-nav {
				background: white;
			}
			
			.mui-content {
				margin-top: 100px;
			}
			
			.diy_header {
				width: 100%;
				background: white;
				padding-bottom: 10px;
				border-bottom: 1px solid #cccccc;
				height: 100px;
				position: relative;
				margin-bottom: 20px;
				position: fixed;
				top: 0;
			}
			
			.diylabel input {
				color: #ababab;
				display: inline-block;
				width: 60%;
				background: none;
				border: none;
				border-bottom: solid 1px #d7d7d7;
				border-radius: 0;
				font-size: 14px;
			}
			
			.diylabel font {
				display: inline-block;
				width: 85px;
				text-align: left;
				font-size: 15px;
			}
			
			.model {
				text-align: center;
			}
			
			.mui-input {
				text-align: center;
			}
			.seach-user {
				width: 78%;
				text-align: center;
				color: #ffffff;
				display: inline-block;
				margin: 30px auto;
				background: #00af66;
				border-radius: 45px;
				line-height: 45px;
				height: 45px;
				margin-left: 11%;
			}
			
			.icon {
				/* 通过设置 font-size 来改变图标大小 */
				width: 5.5em;
				height: 5.5em;
				/* 图标和文字相邻时，垂直对齐 */
				vertical-align: -1em;
				/* 通过设置 color 来改变 SVG 的颜色/fill */
				fill: currentColor;
				/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
				overflow: hidden;
			}
		</style>
	</head>

	<body>

		<div class="diy_header">
			<a class="mui-action-back mui-icon" style="padding-left: 1%;width:200px;height:200px;"><span class="mui-icon mui-icon-back" style="color: #333333;font-size: 26px;margin-top: 15px;"></span></a>
			<h3 style="margin: 0;padding: 0;position: absolute;bottom: 20px;padding-left: 3%;color: #333333;">农户信息</h3>

		</div>
		<div class="mui-content" id="fammerForm">
			<form id="form">
					<div style="text-align: center;padding-top: 15px;padding-bottom: 15px;">
				<svg class="icon" aria-hidden="true">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chinese-"></use>
                    </svg>
				</div>
				<!--<img src="../img/nh.png" width="32%" style="margin-left: 36%;margin-top: 20px;" />-->

				<div class="model">
					<label class="diylabel">
			<font>行政区域</font>
		    <input id='showCityPicker3'  type="text" class="mui-input" placeholder="请选择农户行政区域" readonly="true">
		</label>
				</div>

				<div class="model">
					<label class="diylabel">
			<font>纬度</font>
		    <input v-model="wd" type="text" class="mui-input" placeholder="正在获取定位..." readonly="true">
		</label>
				</div>
				<div class="model">
					<label class="diylabel">
			<font>经度</font>
				<input v-model="jd" type="text" class="mui-input" placeholder="正在获取定位..." readonly="true">
		</label>
				</div>

				<div class="model">
					<label class="diylabel">
			<font>户主姓名</font>
				<input type="text" class="mui-input" placeholder="请输入户主姓名" v-model="name">
		</label>
				</div>

				<div class="model">
					<label class="diylabel">
			<font>身份证号</font>
				<input type="text" pattern="\d*" class="mui-input" placeholder="请输入身份证号" v-model="idcard">
		</label>
				</div>

				<div class="model">
					<label class="diylabel">
			<font>家庭人口</font>
							<input type="number" pattern="\d*" class="mui-input" placeholder="请输入家庭人口数量" v-model="familys">
		</label>
				</div>

				<div class="model">
					<label class="diylabel">
			<font>家庭住址</font>
						<input type="text" class="mui-input" placeholder="请输入家庭住址" v-model="address">
		</label>
				</div>
							<div class="model">
					<label class="diylabel">
			<font>联系电话</font>
					<input type="number" pattern="\d*" class="mui-input" placeholder="请输入联系电话" v-model="mobile">
		</label>
				</div>
										<div class="model">
					<label class="diylabel">
			<font>是否贫困户</font>
						<input id='showUserPicker' type="text" class="mui-input" placeholder="点击选择是否贫困户" readonly="true">
		</label>
				</div>
			</form>
				<a @click="submit" href="javascript:void(0);" class="seach-user">提交</a>
			<!--<form class="mui-input-group" id="form">
				<div class="mui-input-row">
					<label>行政区域</label>
					<input id='showCityPicker3' type="text" class="mui-input-clear" placeholder="点击选择行政区域" readonly="true">
				</div>
				
				<div class="mui-input-row">
					<label>纬度</label>
					<input v-model="wd" type="text" class="mui-input" placeholder="正在获取定位..." readonly="true">
				</div>

				<div class="mui-input-row">
					<label>经度</label>
					<input v-model="jd" type="text" class="mui-input" placeholder="正在获取定位..." readonly="true">
				</div>

				<div class="mui-input-row">
					<label>户主姓名</label>
					<input type="text" class="mui-input-clear" placeholder="请输入户主姓名" v-model="name">
				</div>

				<div class="mui-input-row">
					<label>身份证号</label>
					<input type="text" pattern="\d*" class="mui-input-clear" placeholder="请输入身份证号" v-model="idcard">
				</div>

				<div class="mui-input-row">
					<label>家庭人口</label>
					<input type="number" pattern="\d*" class="mui-input-clear" placeholder="请输入家庭人口数量" v-model="familys">
				</div>

				<div class="mui-input-row">
					<label>家庭住址</label>
					<input type="text" class="mui-input-clear" placeholder="请输入家庭住址" v-model="address">
				</div>

				<div class="mui-input-row">
					<label>联系电话</label>
					<input type="number" pattern="\d*" class="mui-input-clear" placeholder="请输入联系电话" v-model="mobile">
				</div>

				<div class="mui-input-row">
					<label>是否贫困户</label>
					<input id='showUserPicker' type="text" class="mui-input-clear" placeholder="点击选择是否贫困户" readonly="true">

				</div>
			</form>
			<button id='submit' type="button" class="mui-btn mui-btn-primary" @click="submit" style="margin-top: 20px;	width: 90%;height: 46px;left: 50%;margin-bottom: 20px;-webkit-transform: translate(-50%);">提交</button>-->

		</div>

		<script src="../js/resource/mui.js"></script>
		<script src="../js/resource/mui.picker.js"></script>
		<script src="../js/resource/mui.poppicker.js"></script>
		<script src="../js/resource/vue.js"></script>
		<script src="../js/resource/axios.js"></script>
		<script src="../js/resource/config.js"></script>
		<script src="../js/fammerForm.js"></script>
		<script type="text/javascript" charset="utf-8">
			document.addEventListener("plusready", onPlusReady, false);

			function onPlusReady() {
				fammerForm.getGPS()
			}
			(function($, doc) {
				$.init();
				$.ready(function() {

					axios({
						method: 'POST',
						url: sever + '/areajson',
						params: {},
						responseType: 'json',
					}).then(function(result) {
						area = result.data.data
						var _getParam = function(obj, param) {
							return obj[param] || '';
						};
						//普通示例
						var userPicker = new $.PopPicker();
						userPicker.setData([{
							value: '0',
							text: '否'
						}, {
							value: '1',
							text: '是'
						}]);
						var showUserPickerButton = doc.getElementById('showUserPicker');
						showUserPickerButton.addEventListener('tap', function(event) {
							userPicker.show(function(items) {
								showUserPickerButton.value = _getParam(items[0], 'text')
								fammerForm.poor = _getParam(items[0], 'value')
							});
						}, false);
						//					//级联示例
						var cityPicker3 = new $.PopPicker({
							layer: 4
						});
						cityPicker3.setData(area);
						var showCityPickerButton = doc.getElementById('showCityPicker3');
						showCityPickerButton.addEventListener('tap', function(event) {
							cityPicker3.show(function(items) {
								showCityPickerButton.value = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text') + " " + _getParam(items[3], 'text');
								fammerForm.area.push(_getParam(items[0], 'value'))
								fammerForm.area.push(_getParam(items[1], 'value'))
								fammerForm.area.push(_getParam(items[2], 'value'))
								fammerForm.area.push(_getParam(items[3], 'value'))
							});
						}, false);
					})

				});
			})(mui, document);
		</script>
	</body>

</html>